<template>
  <div class="container">
    <el-row class="box">
      <el-col class="left">
        <el-form v-model="searchData" width="100%" :inline="true">
          <el-form-item label="标签名称">
            <el-input size="small" v-model="searchData.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchData.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button size="small" @click="clear">清除</el-button>
          <el-button size="small" type="primary" @click="search">搜索</el-button>
        </el-form>
      </el-col>
      <el-col style="text-align: right" class="right">
        <el-button size="small" type="success" icon="el-icon-edit" @click="addData()">新增标签</el-button>
      </el-col>
    </el-row>
    <!-- 消息提示 -->
    <el-alert :closable="false" :title="`数据一共${this.counts}条`" type="info" show-icon> </el-alert>
    <!-- 渲染列表 -->
    <template>
      <el-table :data="Data" style="width: 100%">
        <el-table-column type="index" label="序号" width="80px"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>

        <el-table-column prop="addDate" label="创建日期">
          <template #default="{ row }">
            {{ formatDate(row) }}
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template #default="{ row }">
            {{ format(row.state) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button v-if="row.state === 0" type="text" @click="start(row)">启用</el-button>
            <el-button v-else type="text" @click="err(row)">禁用</el-button>
            <el-button :disabled="row.state === 1" type="text" @click="aupdateF(row)">修改</el-button>
            <el-button :disabled="row.state === 1" type="text" @click="dele(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 页码切换 -->
    <div class="block" style="text-align: right">
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="query.page"
        :page-size="query.size"
        :page-sizes="[5, 10, 20, 50]"
        layout=" prev, pager, next,sizes, jumper"
        :total="this.counts"
      >
      </el-pagination>
    </div>
    <!-- 新增员工弹层 -->
    <el-dialog :title="titleMap[dialogTitle]" :visible="dialogVisible" width="40%" @close="close">
      <el-form ref="fm" :model="form" label-width="80px">
        <el-form-item label="所属学科">
          <el-select v-model="form.subjectID" style="width: 80%" placeholder="请选择">
            <el-option
              v-for="item in addsearchData"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input v-model="form.tagName" style="width: 80%" placeholder="请输入目录名称" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addlabel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import { list, add, remove, update, changeState } from '@/api/hmmm/tags'
// import { getQueryObject } from '@/utils'
export default {
  name: 'Tags',
  data () {
    return {
      titleMap: {
        addData: '新增标签',
        updateData: '修改标签'
      },
      dialogTitle: '',
      // 新增标签 弹层数据
      form: {
        tagName: '',
        subjectID: ''
      },
      // 所属学科数据
      addsearchData: [],
      dialogVisible: false,
      Data: [],
      // 数据总条数
      counts: 0,
      // 搜索表单数据
      searchData: {
        tagName: '',
        state: ''
      },
      query: {
        page: 1,
        size: 10,
        pagesize: 0
      }
      // 表单验证规则 bug  rules规则不生效
      // rules: {
      //   name: [
      //     { required: true, message: '请输入目录名称', trigger: ['blur', 'change'] }
      //   ]
      // }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 实现按钮点击切换
    async start (res) {
      console.log(res)
      try {
        const { data } = await changeState(res)
        if (data) {
          res.state = 1
          this.$message.success('操作成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    async err (res) {
      // console.log(res)
      try {
        const { data } = await changeState(res)
        if (data) {
          res.state = 0
          this.$message.success('操作成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 时间格式化
    formatDate (row) {
      var date = row.addDate
      if (date === undefined) {
        return ''
      }
      // return moment(date).format("YYYY-MM-DD HH:mm:ss");
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    // 获取列表数据渲染
    async getList () {
      try {
        const { data } = await list(this.query)
        // console.log(data)
        this.Data = data.items
        this.counts = data.counts
        this.addsearchData = data.items
      } catch (error) {
        console.log(error)
      }
    },
    // 点击搜索
    async search () {
      try {
        const { data } = await list(this.searchData)
        // console.log(data)
        this.Data = data.items
        this.counts = data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 点击清除
    clear () {
      this.searchData.tagName = ''
      this.searchData.state = null
    },
    // 点击新增弹层
    addData () {
      this.form = {}
      this.dialogVisible = true
      this.dialogTitle = 'addData'
    },
    // 点击修改弹层
    aupdateF (row) {
      // console.log(row)
      this.form = row
      this.dialogVisible = true
      this.dialogTitle = 'updateData'
    },
    // 弹层确认
    async addlabel () {
      if (this.dialogTitle === 'addData') {
        try {
          await this.$refs.fm.validate()
          await add(this.form)
          this.getList()
          this.close()
          this.$message.success('操作成功')
        } catch (error) {
          console.log(error)
        }
      } else {
        try {
          await this.$refs.fm.validate()
          await update(this.form)
          this.getList()
          this.close()
          this.$message.success('操作成功')
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 关闭弹层 清除数据
    close () {
      this.dialogVisible = false
      this.form = {
        subjectName: '',
        tagName: ''
      }
      // 清除校验残留
      this.$refs.fm.resetFields()
    },
    // 映射 状态
    format (type) {
      const obj = [
        {
          id: 0,
          value: '已禁用'
        },
        {
          id: 1,
          value: '已启用'
        }
      ]
      const map = {}
      obj.forEach(item => {
        map[item.id] = item.value
      })
      // 返回根据map获取到的码值，给模板渲染
      return map[type]
    },

    // 删除
    async dele (data) {
      // console.log(data)
      try {
        await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示')
        await remove(data)
        this.getList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 切换页码
    changePage (page) {
      this.query.page = page
      this.getList()
    },
    // 切换每页多少条数据
    changeSize (size) {
      console.log(size)
      this.query.size = size
      this.query.pagesize = size
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .app-container {
  padding: 10px;
}
.box {
  display: flex;
}
</style>
